<template>
	<view class="balance" :style="'background-color: #f7f7f7;color:#333333;'+'min-height:'+$xyfun.xysys().windowHeight+'px'">
		<view class="head-wrap">
			<view :style="{ background: 'url('+ $xyfun.image('/static/images/balance_bg.png') +') no-repeat right bottom/auto 260rpx' }">
				<view class="money p-lr-50 tc-w">
					<view class="ts-40 tb p-t-50">{{user.info.money||0.00}}</view>
					<view class="title ts-26 m-t-15">账户余额（元）</view>
				</view>
			</view>
		</view>

    <block v-if="!isLoading">
      <view class="log-list" v-if="!isEmpty">
        <view class="item m-b-20 flex p-30" :style="'background-color: #ffffff;'" v-for="item in logList" :key="item.id">
          <view class="l">
            <view class="ts-32 tb">{{item.type_text}}</view>
            <view class="ts-24 m-t-15 tc-333">{{$xyfun.timeFormat(item.createtime)}}</view>
            <view class="ts-22 m-t-15 tc-333">{{item.remark}}</view>

          </view>
          <view class="m-l-auto">
            <view class="tb p-t-25 ts-34 tb" :style="'color:#ff5335;'">{{item.money > 0 ? "+" :""}}{{item.money}}</view>
          </view>
        </view>
      </view>
      <view v-else>
        <xy-empty text="暂无数据" />
      </view>
    </block>

    <view class="bottom-fixed p-b-50 bg-w">
      <button class="ts-30 lh-30 p-25 tc-w tmb m-lr-30" @tap="$xyfun.to('/pages/user/withdraw/apply?type=balance')">提现</button>
    </view>

	</view>
</template>

<script>
	import { mapState,mapActions } from 'vuex';
	import xyUserCard from '@/components/xy-user/card';
  import xyEmpty from '@/components/xy-empty';
	export default {
		components: {
			xyUserCard,
      xyEmpty
		},
		data() {
			return {
        isLoading:true,
        isEmpty: true,
        logList: [],
        currentPage: 1,
        lastPage: 1,
        loadStatus: 'loadmore',
			}
		},
		computed: {
			...mapState(['common','user'])
		},
		async onLoad() {
			this.loadData();
		},
		methods: {
			...mapActions('user',{'getUserInfo':'getInfo'}),
			loadData(){
				this.getUserInfo();

        this.$api.post({
          url: '/user_money/lists',
          loadingTip:'加载中...',
          data: {
            page: this.currentPage,
          },
          success: res => {
            uni.stopPullDownRefresh();
            this.isLoading = false;
            this.logList = [...this.logList, ...res.data];
            this.isEmpty = !this.logList.length;
            this.currentPage = res.current_page;
            this.lastPage = res.last_page;
            this.loadStatus = this.currentPage < res.last_page ? 'loadmore' : 'nomore';
          }
        });
			},

      onPullDownRefresh() {
        this.currentPage = 1;
        this.logList = [];
        this.loadData();
      },
      onReachBottom() {
        if(this.currentPage < this.lastPage) {
          this.currentPage += 1;
          this.loadData();
        }
      },
      reLoadData(){
        this.currentPage = 1;
        this.logList = [];
        this.loadData();
      }
		}
	}
</script>

<style scoped lang="scss">
	.head-wrap{
    background: $uni-color-warning;
		border-radius: 0 0 30% 30%;height: 300rpx;
		.money{height: 300rpx;}
	}
	.menu{position: absolute;width: 630rpx;top: 220rpx;left: 30rpx;background: #fff;}
  .log-list{
    padding-bottom: 150rpx;
  }
</style>